<template>
  <div class="cart-bot">
    <div class="selector" @click="allSelector">
      <check-btn class="checkBtn" :is-checked="isAllSelector"></check-btn>
      <span>全选</span>
    </div>
    <div class="bgc">
      <div class="totalPrice">合计：{{ totalPrice }}</div>
      <div class="goBuy" @click="goBuy">去结算：{{ checkedLength }}件商品</div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import CheckBtn from "components/content/checkbutton/CheckBtn.vue";
export default {
  components: { CheckBtn },
  name: "CartBotBar",
  computed: {
    ...mapGetters(["cartList"]),

    totalPrice() {
      return (
        "￥" +
        this.$store.state.cartList
          .filter((item) => {
            return item.checked;
          })
          .reduce((preValue, item) => {
            return item.price * item.count + preValue;
          }, 0)
      );
    },
    // 返回当前选中了多少件商品（即当前被选中的数组的长度）
    checkedLength() {
      return this.cartList.filter((item) => item.checked).length;
    },
    // 全选按钮 当有一个商品没有选中 就不选中
    isAllSelector() {
      if (this.cartList.length != 0) {
        return !this.cartList.find((item) => !item.checked);
      }
    },
  },

  methods: {
    allSelector() {
      // 如果原来全是选中的 点击就全都不选中，反之亦然。
      if (this.isAllSelector) {
        //全是选中的
        this.cartList.forEach((item) => (item.checked = false));
      } else {
        this.cartList.forEach((item) => (item.checked = true));
      }
    },
    goBuy() {
      this.$toast.showMsg("结算成功");
    },
  },
};
</script>

<style scoped>
.cart-bot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 48px;
  display: flex;
  justify-content: space-between;
  height: 40px;
  background: #eee;
}
.selector {
  font-size: 16px;
  margin-left: 10px;
  display: flex;
  line-height: 40px;
}
.checkBtn {
  height: 30px;
  width: 30px;
  padding-bottom: 30px;
  padding-left: 5px;
  margin-top: 3px;
  margin-right: 10px;
}
.bgc {
  width: 70%;
  display: flex;
}
.totalPrice {
  width: 50%;
  line-height: 40px;
  background: yellow;
  text-align: center;
}
.goBuy {
  width: 50%;
  line-height: 40px;
  text-align: center;
  background: var(--color-tint);
  color: #fff;
}
</style>
